<template>
	<view>
		<!-- 遮罩层 -->
		<u-overlay :show="searchMoreShow" zIndex="10"></u-overlay>
		<scroll-view class="scroll-content-container" scroll-y :style="{height:(headerHeight - tabsHeight - 64) + 'px'}" scroll-y="true"
			v-if="activityOrderList.length > 0" @scrolltolower="reachBottom" :scroll-with-animation="true"
			:enable-back-to-top="true">
			<view class="scroll-content" v-for="(item, index) in activityOrderList" :key="index">
				<view class="data-item">
					<view class="item-top">
						<view class="top-round">
							<view class="top-round-img">
								<u-image :src="`${staticFileUrl}/image/activity/merchant-store-head.png`" width="48rpx"
									height="48rpx" radius="24rpx"></u-image>
							</view>
							<view class="top-round-name">{{item.storeName}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view v-if="item.status ==0" class="top-tag color-primary m-flex-row">待支付</view>
						<view v-if="item.status ==1" class="top-tag color-primary m-flex-row">待核销</view>
						<view v-if="item.status ==2" class="top-tag-complete m-flex-row">已完成</view>
						<view v-if="item.status ==3" class="top-tag-complete m-flex-row">退单</view>
						<view v-if="item.status ==4" class="top-tag color-primary m-flex-row">拼团中</view>
						<view v-if="item.status ==5" class="top-tag-complete m-flex-row">拼团失败</view>
					</view>
					<view class="item-content">
						<view class="content-mid">
							<view class="m-flex-row">
								<u-image :showLoading="true"
									v-if="$u.test.isEmpty(item.picture) || item.picture.length == 0"
									:src="`${staticFileUrl}/image/activity/create-activity.png`" width="165rpx"
									height="109rpx"></u-image>
								<u-image :showLoading="true" v-else :src="item.picture" width="165rpx" height="109rpx">
								</u-image>
								<view style="height: 100%;">
									<view class="content-describe">
										{{item.title}}
									</view>
								</view>
							</view>

							<view class="content-price">
								<view class="">
									<view class="price-sign">￥</view>
									<view class="price-money">{{item.totalAmount}}</view>
								</view>
								<view class="quantity">
									×{{item.totalQuantity}}
								</view>
							</view>
						</view>
						<view class="">
							<view class="right">
								<view class="right-paid">
									实付款：
								</view>
								<view class="price-sign color-primary">￥</view>
								<view class="price-money color-primary">{{item.totalAmount}}</view>
							</view>
						</view>
						<view class="content-hang">
							<view class="content-title">
								下单时间
							</view>
							<view class="font-color-07">
								{{$u.timeFormat(Date.parse(item.createTime), 'yyyy-mm-dd hh:MM:ss')}}
							</view>
						</view>
						<view class="content-hang">
							<view class="content-title">
								订单编号
							</view>
							<view class="m-flex-row">
								<view class="font-color-07">
									{{item.outTradeNo}}
								</view>
								<view @click="copyCode(item.outTradeNo)">
									复制
								</view>
							</view>
						</view>
						<view class="content-hang" v-if="item.payChannelOrderNo">
							<view class="content-title">
								交易单号
							</view>
							<view class="m-flex-row">
								<view class="font-color-07">
									{{item.payChannelOrderNo}}
								</view>
								<view @click="copyCode(item.payChannelOrderNo)">
									复制
								</view>
							</view>
						</view>
						<view class="content-hang">
							<view class="content-title">
								提货方式
							</view>
							<view class="font-color-07" v-if="item.usageType == 1">
								到店核销
							</view>
						</view>
						<view class="content-hang">
							<view class="content-title">
								活动类型
							</view>
							<view class="font-color-07" v-if="item.activityTypeId == 1">
								限时秒杀
							</view>
							<view class="font-color-07" v-if="item.activityTypeId == 2">
								拼团福利
							</view>
							<view class="font-color-07" v-if="item.activityTypeId == 3">
								游戏币红包
							</view>
							<view class="font-color-07" v-if="item.activityTypeId == 4">
								会员储值
							</view>
						</view>
						<view class="content-hang">
							<view class="content-title">
								订单状态
							</view>
							<view class="m-flex-row">
								<view class="font-color-07">
									<view class="text-24">
										<text class="payment-successful"
											v-if="orderStatusEnum.WAIT == item.payStatus">待支付</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.SUCCESS == item.payStatus">支付成功</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.PART_REFUND == item.payStatus">部分退款成功</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.FULL_FERUND == item.payStatus">退款成功</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.REFUNDING == item.payStatus">退款中</text>
										<text class="payment-successful"
											v-else-if="orderStatusEnum.REFUND_FAIL == item.payStatus">退款失败</text>
									</view>
								</view>
								<view class="refund-button" v-if="(item.payStatus == 1 || item.payStatus == 9)">
									<text class="start-button-text"
										@click="showReund(item.outTradeNo,item.id,index)">点击退款</text>
								</view>
							</view>
						</view>
					</view>
					<view class="user-information-box"
						v-if="item.memberId">
						<view class="user-box">
							<u-avatar shape="circle" :src="item.headImgUrl"></u-avatar>
							<view class="user">
								<view class="information-text margin-bottom">
									{{item.nickName?item.nickName:'用户未提供姓名'}}
								</view>
								<view class="user-right-box">
									<view class="margin-bottom information-text">ID:
										<text class="information-text">{{item.memberId}}</text>
										<text class="male" v-if="item.sex === 0">男</text>
										<text v-else-if="item.sex===1" class="female">女</text>
										<text v-else-if="item.sex===2" class="keep-secret">保密</text>
										<text class="keep-secret" v-else>未知</text>
									</view>
								</view>
								<view class="information-text phone-number-box">
									<view @click="dialNumber(item.mobile)" v-if="item.mobile" class="phone-number-box">
										<text style="width:65rpx;">手机:</text>
										<text class="information-text" style="color: #6072FF;">{{item.mobile}}</text>
										<u-icon name="arrow-right" color="#2979ff" size="26rpx"></u-icon>
									</view>
									<text v-else class="text-24">
										手机:用户未提供
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
      <u-loadmore :status="loadStatus" height="70rpx" line=true>
      </u-loadmore>
		</scroll-view>
		<u-empty v-else mode="order" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		<u-popup :show="refundPopupShow" mode="center" :customStyle="{width: '600rpx', padding: '34rpx 54rpx'}"
			round="20rpx" :safeAreaInsetBottom="false" :closeable="true" @touchmove.stop.prevent="moveHandle"
			@close="refundPopupShow=false">
			<view class="content">
				<view class="title">确认退款</view>

				<view class="form">
					<u--form labelPosition="left" :model="form" :rules="rules" ref="form1"
						:labelStyle="{fontSize:'28rpx', color: 'rgba(0, 0, 0, 0.7)', padding: '18rpx 0'}">

						<u-form-item label="退款原因" prop="refundReason" labelWidth="70" required>
							<u--textarea v-model="form.refundReason" placeholder="请输入退款原因" :autoHeight="true"
								border="bottom" maxlength="255" placeholderClass="textarea-placeholder" />
						</u-form-item>

					</u--form>
				</view>

				<view class="u-flex-row u-row-around u-m-t-50">
					<u-button type="default" :plain="true" :hairline="true" text="取消" :customStyle="cancelCustomStyle"
						@click="refundPopupShow=false" />
					<u-button type="primary" :plain="true" :hairline="true" text="确认退款"
						:customStyle="confirmCustomStyle" @click="submitRefund" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			// 父组件tabs的高度
			tabsHeight: {
				type: [Number,String],
				default: 0
			},
      headerHeight: {
				type: [Number,String],
				default: 0
			}
		},
		data() {
			return {
				refundPopupShow: false,
				searchMoreShow: false,
				showSelectOrder: false,
				showSelectOrderType: false,
				startTimePickerShow: false,
				endTimePickerShow: false,
				orderTypeName: '全部',
				dateTimeFormat: 'yyyy-mm-dd hh:MM:ss',
				downIcon: this.$configPath.staticFileUrl + '/image/home/down.png',
				activityOrderList: [],
        loadStatus: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉加载',
					loading: '稍等一会,正在努力为您加载...',
					nomore: '没有更多了'
				},
				params: {
					// activityId: null,
					activityTypeId: null,
					startTime: '',
					endTime: '',
          comprehensiveConditionId:1,
          totalPage: 1,
          pageNum: 1,
          keyword: null,
          status: null,
				},
				type: 'refresh',
				orderStatusEnum: this.$orderStatusEnum,
				staticFileUrl: this.$configPath.staticFileUrl,
				searchBoxHeight: 0,
				tabBarHeight: 0,
				form: {
					refundReason: '',
					outTradeNo: '',
					activityOrderId: 0,
				},
				rules: {
					'refundReason': {
						type: 'string',
						required: true,
						message: '请输入退款原因',
						min: 1,
						max: 255,
						trigger: ['blur'],
					},
				},
				cancelCustomStyle: {
					border: '1rpx solid rgb(224, 224, 224)',
					fontSize: '26rpx',
					color: 'rgb(193,191,191)',
					width: '232rpx',
					height: '72rpx',
					borderRadius: '36rpx'
				},
				confirmCustomStyle: {
					fontSize: '26rpx',
					width: '232rpx',
					height: '72rpx',
					borderRadius: '36rpx'
				},
				welfare: {

				},
				
				activityOrderTypeName: '全部',
				
				searchStyle: {
					width: '500rpx',
				},
			}
		},
		methods: {
			Load(options) {
        if(options.data){
          this.params.comprehensiveConditionId =  options.data.comprehensiveConditionId
          this.params.activityTypeId =  options.data.activityTypeId
          this.params.status =  options.data.status
          this.params.keyword =  options.data.keyword
          this.params.endTime =  options.data.endTime
          this.params.startTime =  options.data.startTime
        }else if(options.activityData){
          console.log(options.activityData)
          this.params.comprehensiveConditionId =  options.activityData.comprehensiveConditionId
          this.params.endTime =  options.activityData.endTime
          this.params.startTime =  options.activityData.startTime
          this.params.keyword =  options.activityData.keyword
        } else if(options && Object.keys(options).length > 0){
          this.params.keyword = options.outTradeNo
          this.params.startTime =  uni.$u.timeFormat(Date.parse(options.startTime), this.dateTimeFormat);
          this.params.endTime =  uni.$u.timeFormat(Date.parse(options.startTime), this.dateTimeFormat);
          this.params.comprehensiveConditionId = 1 //默认是综合条件
        }else{
          //当天开始时间
          this.params.startTime = uni.$u.timeFormat(this.$date.getStartDate(), this.dateTimeFormat);
          //当天结束时间
          this.params.endTime = uni.$u.timeFormat(this.$date.getEndDate(), this.dateTimeFormat);
        }
				this.initData(null);
			},
			Ready() {
			},
			PullDownRefresh() {
				this.initData(this.type);
			},
      //没有参数，默认切换活动
      switchActivity(){
        //当天开始时间
        this.params.startTime = uni.$u.timeFormat(this.$date.getStartDate(), this.dateTimeFormat);
        //当天结束时间
        this.params.endTime = uni.$u.timeFormat(this.$date.getEndDate(), this.dateTimeFormat);
        this.initData(null);
      },
			showReund(outTradeNo, id, index) {
				this.form.activityOrderId = id;
				this.form.outTradeNo = outTradeNo;
				this.refundPopupShow = true;
			},
			dialNumber(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			},
			moveHandle() {},
			initData(type) {
				this.activityOrderList.length = 0;
				this.params.pageNum = 1;
				this.findActivityOrderList(type);
			},
			submitRefund() {
				this.$refs.form1.validate().then(res => {
					uni.showLoading({
						title: '申请退款...',
						mask: true
					});
					if (this.$u.test.isEmpty(this.form.refundReason)) {
						uni.hideLoading();
						getApp().err('请输入退款原因');
						return;
					}
					let body = {
						activityOrderId: this.form.activityOrderId,
						outTradeNo: this.form.outTradeNo,
						refundReason: this.form.refundReason,
					}
					this.$api('activityOrderRefund.refund', body).then(res => {
						uni.hideLoading();
						if (res.status == 0) {
							this.refundPopupShow = false;
							this.form.refundReason = '';
						} else {
							getApp().err(res.msg);
						}
					})
				}).catch(error => {
					getApp().err('请按红色文字提示输入完整信息')
				})
			},
			findActivityOrderList(type) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$api('activityOrder.findActivityOrderListByApplet', this.params).then(res => {
					if (res.status == 0) {
						uni.stopPullDownRefresh();
						uni.hideLoading();
						this.params.pageNum = res.data.pageNum;
						this.params.totalPage = res.data.pages;
						console.log(this.activityOrderList, "合并前的数组")
            this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
            if (this.params.totalPage == 0) {
              this.loadStatus = 'nomore';
            }
						this.activityOrderList.push(...res.data.list) //合并数组
						// console.log(this.activityOrderList, "合并后的数组")
					} else {
						uni.hideLoading();
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(() => {
					if (type === this.type) {
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
				})
			},

			// scroll-view到底部加载更多
			reachBottom() {
        if (this.params.pageNum >= this.params.totalPage) {
          return;
        }
				this.params.pageNum++;
				this.loadStatus = 'loading';
				console.log("下一页", this.params)
				this.findActivityOrderList();
			},
			copyCode(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
					}
				});
			},
		},

	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0rpx;
		padding: 0rpx;
	}

	.text-30 {
		font-size: 30rpx !important;
	}

	.text-24 {
		font-size: 24rpx !important;
	}

	.information-text {
		color: rgba(0, 0, 0, 0.6);
		font-size: 24rpx;
		margin-left: 11rpx;
	}

	.payment-successful {
		margin-right: 14rpx;
		padding: 3rpx 9rpx;
		color: #FFFFFF;
		width: 90rpx;
		height: 30rpx;
		background: rgb(0, 187, 156);
		border-radius: 22rpx;
	}

	.coin-success {
		padding: 3rpx 9rpx;
		color: #00BB9C;
		width: 90rpx;
		height: 30rpx;
		box-sizing: border-box;
		border: 1rpx solid rgb(0, 187, 156);
		border-radius: 22rpx;
	}

	.coin-failure {
		padding: 3rpx 9rpx;
		color: #FF0000;
		width: 90rpx;
		height: 30rpx;
		box-sizing: border-box;
		border: 1rpx solid rgb(255, 0, 0);
		border-radius: 22rpx;
	}

	.user-information-box {
		padding: 24rpx 16rpx;
		width: 615rpx;
		height: 149rpx;
		background: rgba(63, 120, 254, 0.1);
		border-radius: 12rpx;
		display: flex;
		align-items: center;

		.phone-number-box {
			align-items: baseline;
			display: flex;
		}

		.distribution-text {
			color: rgb(96,114,255);
			font-size: 18rpx;
		}

		.margin-bottom {
			margin-bottom: 15rpx;
		}

		.user {
			margin-left: 7rpx;
			width: 70vw;

			.male {
				font-size: 26rpx;
				color: #6072FF;
				margin-left: 13rpx;
			}

			.keep-secret {
				margin-left: 9rpx;
				color: rgb(170, 0, 0);
				font-size: 24rpx;
			}

			.female {
				font-size: 26rpx;
				color: #FF4D94;
				margin-left: 13rpx;
			}
		}

		.user-right-box {
			justify-content: space-between;
			align-items: baseline;
			display: flex;

			.distribution-container {
				width: 50%;
				justify-content: space-between;
				display: flex;

				.details-box {
					display: flex;
					align-items: center;
				}

				.distribution {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 5rpx 15rpx;
					box-sizing: border-box;
					border: 1rpx solid rgb(96,114,255);
					border-radius: 30rpx;

				}
			}
		}

		.user-box {
			display: flex;
			align-items: center;
		}

	}

	.search-box {
		padding: 0 24rpx;
		padding-bottom: 30rpx;
		padding-top: 24rpx;
		background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(236, 245, 255, 255) 100%);
		// background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 999;

		.search-keyword {
			width: 510rpx;
		}

		.search-more {
			display: flex;
			flex-direction: row;
			align-items: center;

			.search-more-title {
				color: rgba(13, 13, 13, 0.9);
				font-size: $f-base;
				line-height: 40rpx;
				margin-right: 27rpx;
			}

			.down-icon {
				height: 10rpx;
				width: 17rpx;
			}
		}

		.rotate-left-180 {
			animation: rotateleft180 0.3s linear both;

			@keyframes rotateleft180 {
				0% {
					transform: rotate(0deg);

				}

				50% {
					transform: rotate(-90deg);
				}

				100% {
					transform: rotate(-180deg);
				}
			}
		}

		.rotate-right-180 {
			animation: rotate180 0.3s linear both;

			@keyframes rotate180 {
				0% {
					transform: rotate(-180deg);
				}

				50% {
					transform: rotate(-90deg);
				}

				100% {
					transform: rotate(0deg);
				}
			}
		}
	}

	.tool-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
		border-top: 1px solid #fafafa;
		height: 100rpx;
		background: $uni-bg-color;
	}

	.search-more-panel {
		position: absolute;
		background: white;
		z-index: 999;
		width: 100vw;

		.u-form-item__body__left__content__label {
			color: rgba(13, 13, 13, 0.7);
			font-size: $f-base;
			line-height: 40rpx;
		}

		.screening-box {
			padding: 0rpx 30rpx 30rpx 30rpx;
		}

		.transition-24 {
			transition: 1000ms ease-in-out 0ms;
			transition-property: height;
			transform-origin: 50% 50% 0;
			-webkit-transition: 1000ms ease-in-out 0ms;
			-webkit-transition-property: height;
			-webkit-transform-origin: 50% 50% 0;
		}

	}

	.tab-bar {
		padding: 10rpx 20rpx 0px;
		background-color: #fff;
	}

	.wrap {
		width: 100vw;
		height: 100vh;
		font-size: 26rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		color: rgba(0, 0, 0, 0.9);
		overflow: hidden;



	}

	.color-primary {
		color: rgb(234, 97, 0) !important;
	}

	.font-color-07 {
		color: rgba(0, 0, 0, 0.7) !important;
		font-size: 26rpx;
	}

	.scroll-content-container {
		.scroll-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 24rpx 0px;

			.data-item {
				background: $uni-bg-color;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				padding: 30rpx;

				.refund-button {
					padding: 15rpx 25rpx;
					background: rgb(234, 8, 8);
					border-radius: 22px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.start-button-text {
					color: rgb(255, 255, 255);
				}

				.item-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.top-round {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.top-round-img {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
						}

						/deep/ .top-round-name {
							margin-left: 12rpx;
							font-size: 26rpx;
						}

						.u-icon--right {
							margin-left: 6rpx;
						}
					}

					.top-tag {
						width: 114rpx;
						height: 50rpx;
						font-size: 26rpx;
					}

					.top-tag-complete {
						width: 114rpx;
						height: 50rpx;
						font-size: 26rpx;
						border-radius: 60rpx;
						background: rgb(239, 239, 239);
						color: rgb(112, 112, 112);
					}
				}

				.item-content {
					display: flex;
					flex-direction: column;
					height: 100%;
					justify-content: space-around;
					border-top: 1px solid rgb(233, 233, 233);
					margin-top: 20rpx;
					padding: 10rpx 0rpx;

					.content-mid {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.content-describe {
							font-size: 26rpx;
							margin: 0rpx 20rpx;
						}

						.m-flex-row {
							justify-content: flex-start;
						}

						.content-price {
							width: 130rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							align-items: flex-end;

							.quantity {
								font-size: 24rpx;
							}
						}
					}

					.price-sign {
						display: inline;
						font-size: 16rpx;
						color: rgb(51, 51, 51);
					}

					.price-money {
						display: inline;
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
					}

					.right {
						float: right;
						display: flex;
						align-items: center;
						align-items: baseline;

						.right-paid {
							color: rgba(0, 0, 0, 0.7);
							font-size: 26rpx;
							font-weight: 400;
							line-height: 34rpx;
						}
					}

					.content-hang {
						margin-bottom: 30rpx;
						display: flex;
						flex-direction: row;
						position: relative;
						align-items: baseline;

						.content-title {
							width: 150rpx;
							font-size: 26rpx;
						}

						.m-flex-row {
							flex-wrap: wrap;
							justify-content: space-between;
							width: 75%;
							color: rgb(37, 110, 218);
							font-size: 26rpx;
						}
					}
					
					.content-hang:nth-last-of-type(1){
						margin-bottom: 18rpx;
					}
				}

				.content-problem {
					height: 140rpx;

					.content-problem-tip {
						font-size: 28rpx;
					}

					.content-bottom {
						margin-top: 10rpx;
						height: 60rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						align-items: center;
						position: relative;
						font-size: 26rpx;

						.do_contact {
							position: absolute;
							width: 200rpx;
							height: 50rpx;
							opacity: 0;
							z-index: 100;
						}
					}
				}

			}
		}
	}

	/deep/ .u-border-bottom:after {
		border-bottom-width: 0rpx;
	}
</style>
